<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件中具名插槽的使用</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>

<body>
    <div id="app">

        <!-- const app = Vue.createApp({
            template: ` 
                        <h2>唯爱薇朝圣之路</h2>
                        <Courses> DevOps课程 </Courses>            
                    `
        })
    
        app.component('Courses', {
            template: `
                <div>
                    <span>你选择了如下课程</span>
                    <span>
                        <slot></slot>
                    </span>
                </div>
            `
        })
    
        const vm = app.mount("#app") -->


    </div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                coursesInfo: {
                    "devops" : "开发运维课程",
                    "golang" : "Golang语言课",
                    "python" : "Python语言课",
                },
            }
        },
        template: ` 
                    <h2>唯爱薇朝圣之路</h2>
                    <hr \>
                    <Courses style="color:red;font-size:25px;" :parentData="this"> DevOps课程 -- {{ coursesInfo.devops }} </Courses>
                    <hr \>
                    <Courses style="color:green;font-size:25px;" :parentData="this"> Golang课程 -- {{ coursesInfo.golang }}</Courses>
                    <hr \>
                    <Courses style="color:red;font-size:25px;" :parentData="this"> Python课程 -- {{ coursesInfo.python }}</Courses>
                    <hr \>
                    <Courses style="color:green;font-size:16px;" :parentData="this"></Courses>
                    <hr \>

                    

                    <Learning>
                        <!-- 随便乱顺序如下 , 子组件里面的顺序不变，则显示顺序不会，这例是具名slot的优点，在排序和逻辑控制上比较方便 -->
                        <template v-slot:preview><div>请先预习课程内容....</div></template>
                        <template v-slot:teaching><div>上课中，请保持安静....</div></template>
                        <template v-slot:assign><div>课后作业部置，请及时完成...</div></template>
                        <template v-slot:checkWork><div>课后作业检查，请及时更正..</div></template>
                    </Learning>
                    <!-- 正常顺序如下 -->
                    <!-- <Learning>
                        <Preview> </Preview>
                        <Teaching> </Teaching>
                        <Assign> </Assign>
                        <CheckWork> </CheckWork>
                    </learning> -->


                    
                `
    })

    app.component('Courses', {
        props: ['parentData'],
        template: `
            <div>
                <span>你选择了如下课程  {{ parentData.coursesInfo.devops }}、{{ parentData.coursesInfo.golang }}、{{ parentData.coursesInfo.python }} 中的 ： </span>
                <span>
                    <slot>如果不传课程，你就看这个默认课程吧《唯爱薇o朝圣之路.技术心理学》</slot>
                </span>
                <div>
                    <!-- 这里的props这个子组件变量名可以随便取 -->
                    <!-- <CourseInfo :courses="parentData.coursesInfo"   v-slot="props">
                        <p>
                            <span>作用域插槽实验</span>
                            <br/>
                            <span>获取子组件传过来的值,并在父组件显示</span>
                            <br />
                            <list>
                                <span> {{ props.detail }}</span>
                            </list>

                        </p>
                    </CourseInfo> -->
                    <!-- 简化写法,Es6语法 -->
                    <CourseInfo :courses="parentData.coursesInfo"   v-slot="{detail}">
                        <p>
                            <span>作用域插槽实验-简化写法,Es6语法</span>
                            <br/>
                            <span>获取子组件传过来的值,并在父组件显示</span>
                            <br />
                            <list>
                                <span> {{ detail }}</span>
                            </list>

                        </p>
                    </CourseInfo>

                </div>
            </div>
        `
    })
    app.component('CourseInfo', {
        props: ['courses'],
        data() {
            return {
                courseDetails: {
                    devops: "这是一门研发和运维都必须学会的科学，做得好的公司一定是大牛公司，学完DevOps手握打开世界的钥匙",
                    golang: "这是一门新时代的程序编程语言，自动现实自举拜托 C 的控制之后,Golang已经成为了新生代们必须掌握的一门语言",
                    python: "比较容易入门但要掌握好，写好成程序则不是一件容易的事，写法比较多，容易你写的代码我看不懂"

                }
            }
        },
        template: `
                <!-- 这有一个跳出循环的问题应该要怎么样实现呢 -->
                <!-- <template v-for="(course,index) in courses">
                        {{ course }}
                        <div v-if="course === '开发运维课程' ">
                            <span>课程简介如下... {{ courseDetails.devops }}</span>
                        </div> 
                        <div v-else-if="course === 'Golang语言课'">
                            <span>课程简介如下... {{ courseDetails.golang }}</span>
                        </div>
                        <div v-else="course === 'Python语言课' ">
                            <span>课程简介如下... {{ courseDetails.python }}</span>
                        </div>
                </template> -->

                <div>
                    <slot v-for="detail in courseDetails" :detail="detail" />
                <div/>

            
        `
    })    

    app.component('Learning', {
        template: `
            <div>
                <span>学习中.....</span>
                <slot name="preview"> preview ==》 </slot>
                <slot name="teaching"> teaching ==》 </slot>
                <slot name="assign"> assign ==》 </slot>
                <slot name="checkWork"> checkWork ==》 </slot>
            </div>
        `
    })    

    const vm = app.mount("#app")
</script>

</html>